<template>
  <!-- <h3>数量:{{num}}</h3> -->
  <h3>count数量:{{count}}</h3>
  <input type="text" v-model="count">
  <button @click="getCount()">获取</button>
  
  	<div>
  		<h4>{{list[1]}}</h4>
  		<h4>{{user}}</h4>
  	</div>
	<button @click="updUser()">修改用户</button>
</template>
<script>
    import {ref} from 'vue'
    export default {
        //option API方式
        // data(){
        //     return{
        //         num:0
        //     }
        // }
        //composition API方式
        setup(){//data methods computed watch都是写在setup中
            //直接这样定义 不是响应式的数据
            // const count = 0;

            //创建响应式的数据对象 我们的count 给初始值为0
            const count = ref(0)

            let getCount = ()=>{
                //如果要访问ref() 创建出来响应式数据对象的值 必须通过.value属性才可以
                console.log(count.value)
            }
			
			const list=ref(["特伦斯","追梦","请叫我小平头"])
			//定义数组对象
			const user=ref([
				{id:101,name:"特伦斯"},
				{id:102,name:"追梦"},
				{id:103,name:"请叫我小平头"},
			])
			
			let updUser = ()=>{
				user.value[0].name="Terrance"
			}

            //模板中要使用这些变量和方法 都需要调用,所以需要return
            return{
                count,getCount,list,user,updUser
            }
        }
    }
</script>
<style>
</style>